<template>
  <view v-if="!shopArr.length" class="kong">
    <image class="img" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/state_empty.png" />
    <text class="tishi">如需开通店铺，请联系客服！</text>
    <button class="lianxi" @click="goService">联系客服</button>
  </view>
   <view class="page" v-else>
        <text class="top-text">您已开通<text style="color: rgb(142,84,244);">{{equitys.length}}家</text>店铺</text>
        <view class="items" v-for="item,index in shopArr" :key="index" @click="goDetails(index)">
          <view class="top">
            <image v-if="item.ka" style="width: 107rpx;height: 28rpx;" :src="filSrc(item.ka)"/>
            <image v-else style="width: 107rpx;height: 28rpx;" :src="noFilSrc(item)"/>
            <view v-if="item.ka">
              <view v-if="getExpired(index)==2">
                <text class="was-due">会员即将到期</text>
              <text @click.stop="getRenew(index)" style="font-size: 28rpx;color: rgb(142,84,244);font-weight: 500;">请续费</text>
              </view>
              <view v-if="getExpired(index)==3">
                <text class="was-due">合成额度不足</text>
              <text @click.stop="getRenew(index)" style="font-size: 28rpx;color: rgb(142,84,244);font-weight: 500;">请续费</text>
              </view>
              <text v-else>有效期至：{{timestamp2Time(item.ka.endDate)}}</text>
            </view>
            
            <view v-else>
              <text class="was-due">已到期</text>
              <text @click.stop="getRenew(index)" style="font-size: 28rpx;color: rgb(142,84,244);font-weight: 500;">请续费</text>
            </view>
          </view>
          <view class="bottom">
            <view style="display: flex;">
              <image style="width: 100rpx;height: 100rpx;border-radius: 9rpx;" :src="item.shopImgPath?item.shopImgPath:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_dianpu@3x.png'" mode="" />
            <view class="introduce">
              <view class="name">{{ item.shopName }}</view>
              <view class="poi">
                <image style="width: 24rpx;height: 24rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_icon_ddianpoi.png" mode="" />
                <text style="width: 464rpx;  white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;">{{ item.shopAddress }}</text>
              </view>
              <view class="profession">
                <image style="width: 24rpx;height: 24rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_icon_hyflei.png" mode="" />
                <text>{{ item.shopCate1Obj.shopCate1Name + '-' + item.shopCate2Obj.shopCate2Name }}</text>
              </view>
            </view>
            </view>
            <image style="width: 48rpx;height: 48rpx;margin-top: 50rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png" mode="" />
          </view>
        </view>
        <!-- <view class="shops">
            <view class="shop" v-for="item,index in equitys" :key="index">
                <view style="display: flex;justify-content: space-between;padding: 24rpx 24rpx 0 24rpx;box-sizing: border-box;">
                  <image v-if="item.ka?item.ka.state==2:false" style="width: 112rpx;height: 28rpx;margin: 12rpx 0;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jcban.png" />
                  <p v-if="item.ka?item.ka.state==2:false" style="font-weight: 400;font-size: 24rpx;color: rgb(142,84,244);">会员期至：{{timestamp2Time(item.ka.endDate)}}</p>
                </view>
                <view class="shop-content">
                    <image style="width: 48rpx;height: 48rpx;" :src="item.shopImgPath?item.shopImgPath:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_dianpu@3x.png'"/>
                    <text style="margin-left: 3px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ item.shopName }}</text>
                </view>
                <text class="shop-text" style="margin-bottom: 6rpx;">开通时间：{{ timestamp2Time(item.ka.useDate) }}</text>
                <text class="shop-text" style="color: rgb(69,70,74);">剩余合成视频数量：{{ item.ka.useNum }}次</text>
            </view>
        </view> -->
        <!-- <view>
            <view class="equity">
                <image style="width: 40rpx;height: 40rpx;margin-right: 8rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/user_icon_diamond.png"/>
                <text>专享4大权益</text>
            </view>
            <view>
                <view class="equitys" style="margin: 0 18rpx 18rpx 0;">
                    <text class="equitys-text">AI创作视频</text>
                    <text>无限次</text>
                    <image class="bgi" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/user_icon_czspin.png"/>
                </view>
                <view class="equitys">
                    <text class="equitys-text">AI智能素材</text>
                    <text>持续更新</text>
                    <image class="bgi" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/user_icon_znscai.png"/>
                </view>
                <view class="equitys">
                    <text class="equitys-text">专业客服</text>
                    <text>7*12小时为您答疑</text>
                    <image class="bgi" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/user_icon_zykfu.png"/>
                </view>
                <view class="equitys1" style="margin-left: 18rpx;">
                    <text class="equitys-text1">更多功能</text>
                    <text>永久免费</text>
                    <image class="bgi" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/user_icon_gdgneng.png"/>
                </view>
            </view>
        </view>
        <button class="btn" @click="liberalVIP()">开通会员</button> -->
   </view>
    <uni-popup ref="popup">
        <view class="popup">
                <text style="font-weight: 700;font-size: 40rpx;color: rgb(93,38,189);">限时<text style="font-size: 40rpx;color: rgb(255,55,71);">优惠  </text>    预计节省<text style="font-size: 56rpx;color: rgb(255,55,71);">3000</text><text style="font-size: 28rpx;color: rgb(255,55,71);">元</text></text>
                <image class="guanbi" @click="close()" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/button_hygbi.png"></image>
            <view class="popup-bottom">
                <text class="bottom-text">选择开通会员的店铺</text>
                <radio-group @change="radioChange" style="overflow-y: scroll;height: 500rpx;">
		    		<label class="label" v-for="item,index in notEquitys" :key="index">
		    			<radio color="rgba(142,84,244,1)" :value="item.shopId" />
		    			<view class="content">
                            <image style="width: 56rpx; height: 56rpx;margin-right: 12rpx;" :src="item.shopImgPath?item.shopImgPath:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_dianpu@3x.png'"></image>
                            <text>{{item.shopName}}</text>
                            </view>
		    		</label>
		    	</radio-group>
                <checkbox-group @change="checkedBox">
		    			<label style="font-size: 24rpx;display: flex;align-items: center;position: absolute;bottom: 196rpx;">
		    				<checkbox style="transform:scale(0.75)" color="rgba(142,84,244,1)" value="cb"/><text style="color: rgba(144,147,153,1);">我已阅读并同意 <text @click="gotoAgreeMent" style="color: rgba(142,84,244); display: inline-block;">《店店有客用户服务协议》</text><text style="color: rgba(142,84,244);" @click="gotoprivacy()">《隐私协议》</text></text>
		    			</label>
		    		</checkbox-group>
                <view class="bottom-pay">
                    <view class="time">限时优惠</view>
                    <view class="bottom-price">
                        <text style="font-size: 24rpx;color: #fff;font-weight: 700;margin-left: 32rpx;">￥<text style="font-size: 48rpx;">2980</text>/年<text style="text-decoration: line-through;color: rgba(255,255,255,0.4);margin-left: 8rpx;">￥5980/年</text></text>
                    </view>    
                    <button class="botton" @click="placeOlder()">立即付款</button>
                </view>
            </view>
        </view>
        
    </uni-popup>
    <uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" type="info" title="请输入卡密" @confirm="dialogInputConfirm"> 
          <input style="border: 1px solid rgb(144,147,153);font-size: 22rpx;border-radius: 8rpx;width: 400rpx;" type="text" v-model="kaMi">
        </uni-popup-dialog> 
	</uni-popup>
</template>

<script>
import { httpRequest } from '../../utils/http';
export default {
    name: 'UniPresetVueVite1Member',

    data() {
        return {
            shopArr:[],
            equitys:[],
            notEquitys:[],
            shopName:0,  
            provider:'',
            price:0,
            description:'',
            orderNum:'',
            openId:'',
            signature:'',
            shopId:0,
            businessId:0,
            productId:0,
            checked:true,
            currentTime:new Date().getTime(),//当前时间
            millisecondsPerDay :24*60*60*1000, //一天的毫秒数
            kaMi:'',//为店铺续期上传的卡密
            index:-1,
            shopKaList:[]
        };
    },
    onLoad(options) {
        // this.getNot()
        this.businessId = uni.getStorageSync('business').businessId
    },
    onShow() {
      this.getShop()
      this.getShopKa()
    },
    methods: {
      async getShopKa(){
      uni.getStorageSync('shop').forEach(e=>{
       httpRequest('/api/getShopKa','POST',{
          businessId:uni.getStorageSync('business').businessId,
          shopId:e.shopId
      }).then(res=>{
        this.shopKaList = [...this.shopKaList,res.data]
      })
      })

    },
      filSrc(e){
      if(e.productName=='基础版'||!e.productName)return 'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/bb_icon_jcban_jhuo.png'
      if(e.productName=='旗舰版')return 'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/bb_icon_qjban_jhuo.png'
      if(e.productName=='专业版')return 'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/bb_icon_zyban_jhuo.png'
    },
    noFilSrc(e){
      const noFilSrcArr = this.shopKaList.filter(item=>item[0].shopId == e.shopId)
      console.log(this.shopKaList[0][0].shopId);
      console.log(e.shopId);
      console.log(noFilSrcArr[0][0]);
      if(noFilSrcArr[0][0].productName=='基础版')return 'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/bb_icon_jcban_gqi.png'
      if(noFilSrcArr[0][0].productName=='旗舰版')return 'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/bb_icon_qjban_gqi.png'
      if(noFilSrcArr[0][0].productName=='专业版')return 'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/bb_icon_zyban_gqi.png'
    },
      getRenew(i){
        this.index = i
        uni.pageScrollTo({ scrollTop: 0 })
        this.$refs.inputDialog.open('center')
      },
      async dialogInputConfirm(e){
      const res = await httpRequest('/api/shopRenewal','POST',{
        shopId:this.shopArr[this.index].shopId,
        kaMi:this.kaMi
      })
      this.kaMi=''
      if(res.code=='0'){
        uni.showToast({title:'续费成功',icon:'none'})
        this.getShop()
      }else{
        uni.showToast({title:'卡密无效或已被使用',icon:'none'})
      }
    },
    async getShop() {
      uni.showLoading({
        title: '请稍后',
        mask: false
      })
      const res = await httpRequest("/api/shopByBusinId", "POST", {
        businessId: uni.getStorageSync("business").businessId,
      });
      const res1 = await httpRequest('/api/empowerShopByBusinId','POST',{
        businessId: uni.getStorageSync("business").businessId,
      })
      uni.hideLoading()
      console.log(res1);
      const accreditList = res1.data
      accreditList.forEach(e=>e.isAccredit = true)
      this.shopArr =[...res.data,...accreditList];
      uni.setStorageSync("shop", this.shopArr);
      this.getEquitys()
    },
      goDetails(i){
        uni.navigateTo({ url: `/pageB/index/details?obj=${encodeURIComponent(JSON.stringify(this.shopArr[i]))}` })
      },
      goService(){
        uni.navigateTo({ url: '/pageB/index/service' })
      },
      gotoprivacy(){
		uni.navigateTo({ url: '/pageC/index/privacy' })

	},
      gotoAgreeMent(){
		uni.navigateTo({ url: '/pageC/index/agreement' })
	},
      close(){
        this.$refs.popup.close()
      },
        checkedBox(e){
            console.log(e.detail);
            
            this.checked = e.detail.value[0]
        },
        radioChange(e){
            this.shopId = e.detail.value
        },
        liberalVIP(){
            this.$refs.popup.bottom()
        },
        getNot(){
            this.notEquitys = this.shopArr.filter(e=>{
                return e.state == 2
            }) 
        },
        getEquitys(){
           this.equitys = this.shopArr.filter(e=>{
                if(e.ka){
                  return e.ka.state==2
                }
            })
            console.log(this.equitys);
            
        },
        timestamp2Time (time){
	  // 使用Date对象将时间戳转换为日期对象
		const date = new Date(time);

		// 获取日期的各个部分，如年、月、日、时、分、秒
		const year = date.getFullYear(); // 年
		const month = date.getMonth() + 1; // 月 (注意月份从0开始，需要加1)
		const day = date.getDate(); // 日
		const hours = date.getHours(); // 时
		const minutes = date.getMinutes(); // 分
		const seconds = date.getSeconds(); // 秒

		// 构建日期字符串，例如：2022-10-08 14:30:00
		const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
		const ymdData = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`// 输出格式化后的日期字符串
		return ymdData
		 },
         //支付
         //获取签名
      async getPerpaySignature(){
        const res = await httpRequest('/api/getPerpaySignature','POST',{
          method:'POST',
          url:'https://api.mch.weixin.qq.com/v3/pay/transactions/jsapi',
          body:JSON.stringify({
              appid:'wx92552bbbe59dc59b',
              mchid:'1656084688',
              description:this.description,
              out_trade_no:this.orderNum,
              notify_url:'https://www.diandianyouke.cn:8088/api/orderResult',
              amount:{total:this.price},
              payer:{openid:this.openId}
            })
        })
        console.log(res);
        this.signature = res.data
      },
      getExpired(index){
      //判断卡是否过期（过期为空）1：已过期 2：三天后到期 3：余额不足50次
      if (!this.shopArr[index].ka)return 1
      //判段是否3天后到期或者余额不足50次
      const threeDaysLater = new Date(this.currentTime + this.millisecondsPerDay*3).getTime();
      if(this.shopArr[index].ka.endDate<threeDaysLater)return 2
      if(this.shopArr[index].ka.useNum<50)return 3
      this.isExpired = 0
    },
      //获取openId
      // getOpenId(){
      //   uni.getProvider({
      //     service:'oauth',
      //     success: ({ service, provider }) => {
      //       uni.login({
      //         provider:provider,
      //         success: async(res) => {
      //           console.log(res.code);
      //           const res1 = await httpRequest('/api/jscode2session','POST',{code:res.code})
      //           console.log(res1);
      //           console.log(JSON.parse(res1.data));
      //           this.openId = JSON.parse(res1.data).openid
      //               uni.setStorageSync('openid',JSON.parse(res1.data).openid) 
      //           // uni.request({
      //           //   url: 'https://api.weixin.qq.com/sns/jscode2session',
      //           //   data: {
      //           //       appid:'wx92552bbbe59dc59b',
      //           //       secret:'77cbbbf2b05b0912c13cd8dacb8be296',
      //           //       js_code:res.code,
      //           //       grant_type:'authorization_code'
      //           //       },
      //           //   header: {
      //           //     Accept: 'application/json',
      //           //     'Content-Type': 'application/json',
      //           //     'X-Requested-With': 'XMLHttpRequest'
      //           //   },
      //           //   method: 'GET',
      //           //   sslVerify: true,
      //           //   success: ({ data, statusCode, header }) => {
      //           //     console.log(data);
      //           //     this.openId = data.openid
      //           //     uni.setStorageSync('openid',data.openid)
      //           //   },
      //           //   fail: (error) => {}
      //           // })
               
      //         },
      //       })
      //     },
      //     fail: (error) => {}
      //   })
      // },
      //获取订单信息
    //  async getPayInfo(){
    //     const res = await httpRequest('/api/paymentInfo','POST',{})
    //     console.log(res);
    //     this.price = res.data.price
    //     this.description = res.data.description
    //     this.orderNum = res.data.orderNum
    //     this.productId = res.data.productId
    //   },
      //获取预支付和下单
      // placeOlder(){
      //   if(this.checked!='cb')return uni.showToast({title:'请先勾选协议',icon:'none'})
      //   if(!this.shopId)return uni.showToast({title:'请先选择店铺',icon:'none'})
      //   uni.request({
      //       url: 'https://api.mch.weixin.qq.com/v3/pay/transactions/jsapi',
      //       method: 'POST',
      //       header: {
      //       'Authorization': `WECHATPAY2-SHA256-RSA2048 ${this.signature},`,
      //       'Accept': 'application/json',
      //       'Content-Type': 'application/json'
      //       },
      //       data: JSON.stringify({
      //         "appid":'wx92552bbbe59dc59b',
      //         "mchid":'1656084688',
      //         "description":this.description,
      //         "out_trade_no":this.orderNum,
      //         "notify_url":'https://www.diandianyouke.cn:8088/api/orderResult',
      //         "amount":{"total":this.price},
      //         "payer":{"openid":this.openId}
      //       }),
      //       success:async(res)=>{
      //         console.log(res);
      //         const res1 = await httpRequest('/api/getZFPageSignature','POST',{
      //           appId:'wx92552bbbe59dc59b',
      //           prepayId:`prepay_id=${res.data.prepay_id}`
      //         })
      //         console.log(res1);
              
      //         uni.requestPayment({
      //           provider: this.provider,
      //           orderInfo:{
      //             description:this.description,
      //             price:this.price,
      //             orderNum:this.orderNum
      //           },
      //           timeStamp:res1.data.timeStamp.toString(),
      //             nonceStr:res1.data.nonceStr,
      //             package:`prepay_id=${res.data.prepay_id}`,
      //             signType:'RSA',
      //             paySign:res1.data.paySign,
      //           success: async(res2) => {
      //             console.log(res2);
      //             const res3 = await httpRequest('/api/getOrderInfo','POST',{
      //               orderNumber:this.orderNum,
      //               shopId:this.shopId,
      //               businessId:this.businessId,
      //               productId:this.productId
      //             })
      //             console.log(res3);
      //             if(!res3.success) return uni.showToast({
      //               title: '支付取消',
      //               icon: 'none',
      //             })
      //             //提示用户
      //             uni.showToast({
      //               title: '支付成功',
      //               icon: 'success',
      //               mask: true
      //             })
      //             //跳转页面
      //             uni.reLaunch({ url: '/pageB/index/member' })
      //           },
      //           fail: (error) => {
      //             console.log(error);
      //             uni.showToast({
      //               title: '支付取消',
      //               icon: 'none',
      //             })
      //           }
      //         })
      //       }
      // });
      // },
      // onOrderPay(){
      //   //获取服务提供商
      //   uni.getProvider({
      //     service: 'payment',
      //     success: (res) => {
      //       console.log(res);
      //       this.provider = res.provider[0]
            
      //     },
      //     fail: (error) => {
      //       console.log(error);
      //     }
      //   })
      //   this.placeOlder()
      // }
    },
};
</script>

<style lang="scss" scoped>
.popup{
        width: 100%;
        height: 938rpx;
        background-color: rgb(242,235,255);
        border-radius: 48rpx 48rpx 0 0;
        padding: 24rpx 30rpx;
        box-sizing: border-box;
        .guanbi{
          position: absolute;
          top:-82rpx;
          right:30rpx;
          width: 88rpx;
          height: 88rpx;
        }
        .popup-bottom{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            box-sizing: border-box;
            height: 870rpx;
            background-color: #fff;
            border-radius: 48rpx 48rpx 0 0;
            padding: 30rpx;
            .bottom-text{
                font-size: 36rpx;
                font-weight: 700;
                color: rgb(69,70,74);
                margin-bottom: 30rpx;
            }
            .label{
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                height: 104rpx;
                margin-top: 24rpx;
                .content{
                    width: 618rpx;
                    height: 104rpx;
                    background-color: rgb(249,249,249);
                    display: flex;
                    align-items: center;
                    padding: 24rpx;
                    box-sizing: border-box;
                    border-radius: 16rpx;
                    font-size: 32rpx;
                    color: rgb(48,49,51);
                    font-weight: 700;
                }
            }
            .bottom-pay{
                position: fixed;
                bottom: 68rpx;
                width: 690rpx;
                height: 98rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background-color: rgb(48,48,48);
                border-radius: 16rpx;
                margin-top: 30rpx;
                .time{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 112rpx;
                        height: 30rpx;
                        border-radius: 16rpx 16rpx 16rpx 0;
                        background-color: rgb(255,55,71);
                        font-size: 20rpx;
                        color: #fff;
                        text-align: center;
                        line-height: 30rpx;
                    }
                .bottom-price{
                    
                    
                }
                .botton{
                        margin: 0;
                        padding: 0;
                        width: 324rpx;
                        height: 86rpx;
                        text-align: center;
                        line-height: 86rpx;
                        background:linear-gradient(90deg,rgba(142,84,244,1)0%,rgba(177,83,245,1)100%);
                        color: #fff;
                        font-size: 32rpx;
                        border-radius: 12rpx;
                        margin-right: 6rpx;
                        
                    }
            }
        }
    }
    .kong{
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgb(246,248,251);
      padding: 0 70rpx;
      text-align: center;
      overflow: hidden;
      .img{
        width: 610rpx;
        height: 368rpx;
        margin-top: 132rpx;
        margin-bottom: 42rpx;
      }
      .tishi{
        font-size: 32rpx;
        color: rgb(69,70,74);
      }
      .lianxi{
        width: 240rpx;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        font-size: 32rpx;
        color: #fff;
        background-color: rgb(142,84,244);
        border-radius: 310rpx;
        margin-top: 52rpx;
      }
    }
.page{
  box-sizing: border-box;
    position: absolute;
    padding: 30rpx;
    background-color: rgb(246,248,251);
    width: 100%;
    height: 100%;
    .top-text{
        font-size: 44rpx;
        color: rgb(69,70,74);
        margin-bottom: 30rpx;
        font-weight: 700;
    }
    .items{
      width: 690rpx;
      height: 288rpx;
      margin-top: 42rpx;
      border-radius: 16rpx;
      margin-bottom: 30rpx;
      box-shadow: 0rpx 4rpx 20rpx rgba(0,0,0,0.1);
      .top{
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 84rpx;
        width: 100%;
        background-color: rgba(142,84,244,0.05);
        padding: 0 30rpx;
        font-size: 24rpx;
        color: rgb(142,84,244);
        .was-due{
          font-size: 24rpx;
          color: rgb(144,147,153);
          margin-right: 12rpx;
        }
      }
      .bottom{
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        width: 100%;
        height: 204rpx;
        padding: 30rpx 6rpx 30rpx 30rpx;
        background-color: #fff;
        .introduce{
          font-size: 24rpx;
          color: rgb(144,147,153);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 12rpx;
          .name{
            font-size: 32rpx;
            color: rgb(48,49,51);
          }
          .poi{
            display: flex;
            align-items: center;
          }
        }
      }
    }
    .shops{
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
        height: 252rpx;
        margin-bottom: 54rpx;
        margin-top: 30rpx;
        &::-webkit-scrollbar {
          width: 0;
          height: 0;
        }

        &::-webkit-scrollbar-thumb {
          background-color: transparent;
        }

        &::-webkit-scrollbar-track {
          background-color: transparent;
        }
        .shop{
            width: 488rpx;
            height: 248rpx;
            margin-right: 24rpx;
            box-shadow: 0rpx 4rpx 20rpx rgba(0,0,0,0.05);
            border-radius: 12rpx;
            flex: 0 0 auto;
            // padding: 0 24rpx;
            .state{
                width: 124rpx;
                height: 46rpx;
                background-color: rgb(241,241,241);
                font-size: 28rpx;
                text-align: center;
                line-height: 46rpx;
                color: rgb(144,147,153);
                border-radius: 12rpx 0 12rpx 0;
            }
            .shop-content{
                display: flex;
                align-items: center;
                margin: 22rpx 24rpx 18rpx 24rpx;
                font-size: 32rpx;
                color: rgb(48,49,51);

            }
            .shop-text{
                display: block;
                font-size: 28rpx;
                color: rgb(144,147,153);
                margin-left: 24rpx;
            }
        }
    }
    .equity{
        display: flex;
        align-items: center;
        font-size: 36rpx;
        font-weight: 700;
        color: rgb(69,70,74);
        margin-bottom: 24rpx;
        
    }
    .equitys{
        display: inline-block;
        box-sizing: border-box;
        width: 336rpx;
        height: 188rpx;
        padding: 30rpx 24rpx;
        background:linear-gradient(135deg,rgb(254,245,255)0%,rgb(224,207,255)100%);
        font-size: 26rpx;
        color: rgb(142,84,244);
        position: relative;
        border-radius: 12rpx;
        .equitys-text{
            font-size: 30rpx;
            color: rgb(93,38,189);
            font-weight: 700;
            display: block;
            margin-bottom: 6rpx;
        }
        .bgi{
            position: absolute;
            top: 40rpx;
            right: 0;
            width: 148rpx;
            height: 148rpx;
        }
    }
    .equitys1{
        display: inline-block;
        box-sizing: border-box;
        width: 336rpx;
        height: 188rpx;
        padding: 30rpx 24rpx;
        background:linear-gradient(135deg,rgb(255,249,227)0%,rgb(255,228,122)100%);
        font-size: 26rpx;
        color: rgb(252,160,30);
        position: relative;
        border-radius: 12rpx;
        .equitys-text1{
            font-size: 30rpx;
            color: rgb(252,118,0);
            font-weight: 700;
            display: block;
            margin-bottom: 6rpx;
        }
        .bgi{
            position: absolute;
            top: 40rpx;
            right: 0;
            width: 148rpx;
            height: 148rpx;
        }
    }
    .btn{
        position: fixed;
        bottom: 72rpx;
        width: 690rpx;
        height: 88rpx;
        background:linear-gradient(90deg,rgba(142,84,244,1)0%,rgba(177,83,245,1)100%);
        color: #fff;
        font-size: 36rpx;
        border-radius: 12rpx;
        text-align: center;
        line-height: 88rpx;
        margin: 0;
        padding: 0;
    }
    .active{
        background-color: rgba(109,216,160,0.1) !important;
        color: rgb(58,224,125) !important;
    }
    .vip{
      color: rgb(142,84,244) !important;
    }
}
    
</style>